<script lang="ts" setup>
import { h, ref } from 'vue';

import { DeleteOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

const params = ref({
  keyword: '',
});

const dataSource = ref([
  {
    id: '123456',
    clientName: '香奈儿',
    createTime: '2025-08-19 20:01:17',
  },
  {
    id: '123456',
    clientName: '香奈儿',
    createTime: '2025-08-19 20:01:17',
  },
]);
const columns = ref([
  {
    title: '客户名称',
    dataIndex: 'clientName',
    key: 'clientName',
    width: 240,
    align: 'center',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    width: 120,
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 100,
    align: 'center',
  },
]);

const handleDelete = () => {
  message.success('删除成功');
};
</script>
<template>
  <div class="page-wrap">
    <div class="action-wrap">
      <a-space class="button-wrap">
        <a-button type="primary">导入</a-button>
        <a-button type="default">导入模板</a-button>
      </a-space>
      <a-space class="search-wrap">
        客户名称
        <a-input style="width: 120px" v-model:value="params.keyword" />
        <a-button type="primary">搜索</a-button>
      </a-space>
    </div>
    <div class="content-wrap">
      <a-table :data-source="dataSource" :columns="columns">
        <template #bodyCell="{ column, text, record }">
          <template v-if="column?.key === 'operation'">
            <div>
              <a-button
                class="button-interval"
                type="link"
                size="small"
                :icon="h(DeleteOutlined)"
                @click="handleDelete(record)"
              >
                删除
              </a-button>
            </div>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>
<style scoped></style>
